<template>
  <div class="app-container">
    <div class="filter-container" style="color:#909399;font-size:14px;">{{posmerchantInfo.name}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <el-form-item label="商户编码" prop="merchantNo" ref="merchantNo">
        <el-input v-model="ruleForm.merchantNo"></el-input>
      </el-form-item>
      <el-form-item label="商户APPID" prop="shopNum" ref="shopNum">
        <el-input v-model="ruleForm.shopNum"></el-input>
      </el-form-item>
      <el-form-item label="商户密码" prop="jdKey" ref="jdKey">
          <el-input v-model="ruleForm.jdKey"></el-input>
      </el-form-item>
      <el-form-item label="上传证书JKS" prop="md5Key" ref="md5Key">
        <el-upload
          class="upload-demo"
          :action="domain+'/merchantimg/upload/jks'"
          :headers="headers"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="getJKS"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          name="imgs">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="费率" prop="scanRate" ref="scanRate">
        <el-input v-model="ruleForm.scanRate">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="close();">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getMerchantpaychannel, getPosmerchant, addRevDelmerchantpaychannel, merchantpaychannelList, addPayMode } from '@/api/api.verify.js'
import { domain } from "@/utils/config.js"
import { getToken } from '@/utils/auth'

export default {
  name: 'HxbankForm',
  data() {
    return {
      domain:domain,
      headers:{token:getToken()},
      posmerchantInfo:{},//门店信息
      fileList:[],//上传列表   
      ruleForm: {
        merchantNo:null,//商户编码
        shopNum:null,//商户APPID
        jdKey:null,//商户公钥
        md5Key:null,//上传证书JKS
        scanRate:null,//费率

        channelId:261,//系统通道id
        channelName:"华夏银行",//通道名称
        checkStatus:20,//审核状态
        channelType:90,//通道类型
        merchantId:null,//商户id
        whetherHigQulitMerch:20,//表单
      },
      rules: {
        merchantNo:[
          {required: true, message: '请输入商户编码', trigger: 'blur'},
        ],
        shopNum:[
          {required: true, message: '请输入商户APPID', trigger: 'blur'},
        ],
        jdKey:[
          {required: true, message: '请输入商户公钥', trigger: 'blur'},
        ],
        md5Key:[
          {required: true, message: '请上传证书JKS', trigger: 'blur'},
        ],
        scanRate:[
          {required: true, message: '请输入费率', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.posmerchantInfo=this.$route.query
    this.getStart();
  },
  methods: {
    getStart() {//初始化
      let _this=this;
      let merchantId=this.posmerchantInfo.id
      this.ruleForm.merchantId=merchantId;
      this.getPosmerchant();
    },
    getPosmerchant(){//商户信息查询
      let data={};
      let _this=this;
      if(this.posmerchantInfo.typeId){
        data.typeId=this.posmerchantInfo.typeId
        getMerchantpaychannel(data).then(d=>{
          _this.ruleForm.merchantNo=d.data.merchantNo;//商户编码
          _this.ruleForm.shopNum=d.data.shopNum;//商户APPID
          _this.ruleForm.jdKey=d.data.jdKey;//商户公钥
          _this.ruleForm.md5Key=d.data.md5Key;//上传证书JKS
          _this.ruleForm.scanRate=d.data.scanRate;//费率
        })
      }else{
        data.id=this.posmerchantInfo.id
        getPosmerchant(data,'GET').then(d=>{
          _this.merchantInfo=d.data;
          _this.ruleForm.scanRate=d.data.transRuleType;
        });
      };
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid,object) => {
        if(valid) {
          _this.getForm()
        }else{
          for (const i in object) {
            let dom = this.$refs[i]
            // 这里是针对遍历的情况（多个输入框），取值为数组
            if (Object.prototype.toString.call(dom) !== '[object Object]') { 
                dom = dom[0]
            }
                // 第一种方法（包含动画效果）
                dom.$el.scrollIntoView({ // 滚动到指定节点
                // 值有start,center,end，nearest，当前显示在视图区域中间
                block: 'center', 
                // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                behavior: 'smooth' 
            });
            break // 跳出循环了
          }
        }
      });
    },
    getForm() {//提交表单
        let _this=this;
        let data=this.ruleForm;
        let method="POST";
        let msg="添加成功";
        if(this.posmerchantInfo.typeId){
            method="PUT";
            msg="修改成功";
            data.id=this.posmerchantInfo.typeId
        }
        addRevDelmerchantpaychannel(data,method).then(d=>{
          this.$message({
              message: msg,
              type: 'success'
          });
          if(method=="POST"){
              let datas={};
              datas.merchantId=this.posmerchantInfo.id
              datas.channelId=261;
              merchantpaychannelList(datas).then(dd=>{//获取商户通道列表
                let arrays=[];
                arrays[0]={merchId:this.posmerchantInfo.id,merchChanId:dd.data[0].id,payType:'wx'};
                arrays[1]={merchId:this.posmerchantInfo.id,merchChanId:dd.data[0].id,payType:'ali'};
                arrays[2]={merchId:this.posmerchantInfo.id,merchChanId:dd.data[0].id,payType:'unionpay'};
                arrays[3]={merchId:this.posmerchantInfo.id,merchChanId:dd.data[0].id,payType:'wxface'};
                addPayMode(arrays).then(ddd=>{
                  setTimeout(function(){
                    _this.$router.go(-1)
                  },2000)
                });
              });
          }else{
              setTimeout(function(){
                  window.close();
              },2000);
          }
        })
    },
    handleRemove(file, fileList) {//确认删除
        this.ruleForm.md5Key=null;
    },
    handleExceed(files, fileList) {//多个提示
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {//点击删除
        return this.$confirm(`确定移除 ${ file.name }？`);
    },
    getJKS(e){//上传返回
        if(e.code==1){
            this.ruleForm.md5Key=e.data.jksUrl;
        }else{
            this.fileList=[];
        }
    }
  }
}
</script>

